<template>
  <div class="content">
    <div style="boxs">
      <!-- <Header :params="params" /> -->
    </div>
    <!-- tab -->
    <van-tabs v-model="active" @change="onchange" swipeable sticky background="#F7F9FA" color="#299BFF" title-inactive-color="#333333" title-active-color="#299BFF" line-width="0.48rem" line-height="0.04rem">
      <van-tab :title="item.title" v-for="(item, index) in list" :key="index">
        <!-- 待提交 -->
        <van-list class="list" v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了" @load="onLoad">

          <!-- 待审批 已通过 有详情 -->
          <div class="listCon" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
            <!-- 待提交 已驳回 无详情 -->
            <!-- <div class="listCon" v-for="(item, index) in dataList" :key="index"> -->
            <img src="/img/videoTask/listConImg.png" alt="">
            <div class="listCon_m">
              <div class="title">教室图片任务</div>
              <div class="courseName infos"><span>课程名称：</span><span>{{item.courseName}}-{{item.className}}</span></div>
              <div class="type infos"><span>任务类型：</span><span>{{item.renwuType}}</span></div>
              <div class="userName infos"><span>分派人员：</span><span>{{item.bossUser}}</span></div>
              <div class="time infos"><span>截止时间：</span><span>{{item.submitTime}}</span></div>
              <!-- 状态 -->
              <div class="state" v-if="active == 0">待提交</div>
              <div class="state" v-if="active == 1">待审批</div>
              <div class="state passState" v-if="active == 2">已通过</div>
              <div class="state" v-if="active == 3">已驳回</div>
            </div>
            <div class="listCon_r">
              {{item.createTime}}
            </div>
            <!-- 上传按钮 -->
            <img class="upload" src="/img/videoTask/upload.png" alt="" v-if="active == 0" @click="toUpload(item)">
          </div>
          <div v-if="show" @click="cancelVideo" class="videoMask">
            <div class="wrapper">
              <div>
                <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions">
                </video-player>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";
import LoginVue from "../../login/Login.vue";
export default {
  components: {
    Header,
  },
  data() {
    return {
      params: {
        left: true,
        title: "教室图片任务",
      },
      active: JSON.parse(localStorage.getItem("roomTaskOrder")) || 0,
      show: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //倍速控制
        autoplay: false, //是否自动播放
        muted: false, //是否静音播放
        loop: false, //是否循环播放
        preload: "auto",
        language: "zh-CN", //语言，还要引入对应的文件
        aspectRatio: "16:9", //比例
        fluid: true,
        sources: [
          {
            type: "",
            src: "", //url地址
          },
        ],
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        controlBar: {
          timeDivider: true,
          durationDisplay: true, //剩余时间是否显示
          remainingTimeDisplay: false, //剩余时间是否显示，有一个即可
          fullscreenToggle: true, //全屏按钮
        },
      },
      status: "",
      // 当前页码
      pageNum: 1,
      // 数据总量
      totalNum: "",
      loading: false,
      finished: false,
      list: [
        {
          title: "待提交",
        },
        {
          title: "待审批",
        },
        {
          title: "已通过",
        },
        {
          title: "已驳回",
        },
      ],
      dataList: [],
    };
  },
  mounted() {
    // 判断  如果有roomTaskOrder  判断  是多少   如果没有请求待提交的
    if (localStorage.getItem("roomTaskOrder")) {
      // 待提交
      if (localStorage.getItem("roomTaskOrder") == 0) {
        this.status = 0;
        this.commonQueryData();
      }
      // 待审批
      if (localStorage.getItem("roomTaskOrder") == 1) {
        this.status = 1;
        this.commonQueryData();
      }
      // 已通过
      if (localStorage.getItem("roomTaskOrder") == 2) {
        this.status = 2;
        this.commonQueryData();
      }
      // 已驳回
      if (localStorage.getItem("roomTaskOrder") == 3) {
        this.status = 3;
        this.commonQueryData();
      }
    } else {
      this.status = 0;
      this.commonQueryData();
    }
  },
  methods: {
    onchange(index) {
      this.active = index;
      // 存进localStorage中的数据必须是字符串
      localStorage.setItem("roomTaskOrder", JSON.stringify(index));
      this.dataList = [];
      this.pageNum = 1;
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    onLoad() {
      // 待提交
      if (this.active == 0) {
        this.status = 0;
        this.commonQueryData();
      } else if (this.active == 1) {
        this.status = 1;
        this.commonQueryData();
      } else if (this.active == 2) {
        this.status = 2;
        this.commonQueryData();
      } else if (this.active == 3) {
        this.status = 3;
        this.commonQueryData();
      }
    },
    commonQueryData() {
      (async () => {
        const { data } = await this.get(
          "/approve/queryApproveByStatusAndUserId",
          {
            userId: localStorage.getItem("id"),
            renwuType: "上课图片",
            status: this.status,
            pageSize: 6,
            pageNum: this.pageNum,
          }
        );
        this.totalNum = data.totalNum;
        this.dataList = [...data.items, ...this.dataList];
        this.loading = false;
        this.pageNum++;
        // 数据全部加载完成
        if (this.dataList.length >= this.totalNum) {
          this.finished = true;
        }
      })();
    },
    toUpload(item) {
      this.$router.push({
        path: "/uploadImgFile",
        query: {
          id: item.taskId,
          status: "待提交"
        },
      });
    },
    // 待审批  预览视频
    preVideo(item) {
      this.playerOptions.sources[0].src = item.beikeFile;
      this.$toast.loading({
        message: "加载中",
        duration: 500,
        onClose: () => {
          this.show = true;
        },
      });
    },
    cancelVideo() {
      this.show = false;
    },
    // 审批详情
    toDetail(item) {
      if (item.status == 0) {
        return;
      } else {
        this.$router.push({
          path: "/pendingDetail",
          query: {
            id: item.taskId,
            data: {
              courseName: item.courseName,
              className: item.className,
              renwuType: item.renwuType,
              bossUser: item.bossUser,
              createTime: item.createTime,
              submitTime: item.submitTime,
              status: item.status,
              remark: item.remark
            },
            type: "图片",
          },
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.boxs {
  width: 100%;
}
.content {
  width: 100%;
  min-height: 100%;
  background-color: #ffffff;
  .list {
    padding: 0.24rem 0.24rem 0;
    .listCon {
      width: 7.05rem;
      margin-bottom: 0.24rem;
      display: flex;
      border-bottom: 0.01rem #ededed solid;
      padding-bottom: 0.32rem;
      align-items: flex-start;
      position: relative;
      img {
        width: 0.72rem;
        height: 0.72rem;
      }
      .listCon_m {
        margin-left: 0.17rem;
        flex-shrink: 0;
        div {
          font-size: 0.24rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #7f7f7f;
        }
        .title {
          font-size: 0.26rem;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          margin-bottom: 0.22rem;
        }
        .infos {
          margin-bottom: 0.06rem;
        }
        .time {
          margin-bottom: 0;
        }
        .videoList {
          width: 6rem;
          display: flex;
          flex-wrap: wrap;
          img {
            width: 0.94rem;
            height: 0.94rem;
            margin-right: 0.2rem;
            margin-top: 0.2rem;
          }
        }
        .state {
          font-size: 0.2rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #fa732a;
          margin-top: 0.14rem;
        }
        .passState {
          color: #299bff;
        }
      }
      .listCon_r {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 0.2rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #7e7e7e;
      }
      .upload {
        width: 0.38rem;
        height: 0.34rem;
        position: absolute;
        bottom: 0.32rem;
        right: 0;
      }
    }
    .videoMask {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        div {
          width: 100%;
        }
      }
    }
  }
}
.van-cell__value--alone {
  display: flex;
  align-items: flex-start;
}
</style>